<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <%
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ request.getContextPath()+"/";
%>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="<%=basePath %>css/list.css">
		<link href="<%=basePath %>css/H-ui.min.css" rel="stylesheet" type="text/css" />
		<script src="<%=basePath %>js/jquery.min.js"></script>
		<link rel="stylesheet" href="<%=basePath %>lib/icheck/icheck.css">
        <script src="<%=basePath %>lib/My97DatePicker/WdatePicker.js"></script>
        <script src="<%=basePath %>lib/icheck/jquery.icheck.min.js"></script>
		<script src="<%=basePath %>js/H-ui.js"></script>
        <script src="<%=basePath %>js/echarts.js"></script>
        <style>
        	.input-text, .textarea{
        		width: auto;
        	}
        </style>     
       
    </head>
    <body>
    	<div class="connect_wrap">
    	
    	<ul id="Huifold1" class="Huifold">
		  <li class="item">
		    <h4>商品分类销售查询<b>+</b></h4>
		    <div class="info" style="border: 1px solid #E8EAEA;padding-bottom: 18px;">
		    	<form action="<%=basePath %>goodsOrderRelation/goodsCategoriesSales" method="get">
		    		<div class="row">
			    		<div style="float: left;">
			    			<div class="input-group">
			    			<input type="hidden" id="selectId" name="id" />
			    			<span class="input-group-addon">商品种类: </span>
							  <select class="input-text size-S" id="buyType" name="goodsSort" style="width: 135px;" onclick="choice()">
						  	  		<option value="1" ${goodsSort==1 ? 'selected="selected"':''}>按课程</option>
						  	  		<option value="2" ${goodsSort==2 ? 'selected="selected"':''}>按章节</option>
						  	  		<option value="3" ${goodsSort==3 ? 'selected="selected"':''}>按年卡</option>
							  </select>
							  <span class="input-group-addon">商品名称: </span>
							  <select name="courseId" id="courseId" >
		    				<c:forEach items="${courses}" var="c">
		    				<option value="${c.id}" ${courseId==c.id ? 'selected="selected"':''}>${c.id}:${c.courseName}</option>
		    			</c:forEach>
  						</select>
  						
  						<select name="chapterId" id="chapterId" >
		    			<c:forEach items="${chapters}" var="c">
		    				<option value="${c.id}"  ${chapterId==c.id ? 'selected="selected"':''}>${c.id}:${c.chapterName}</option>
		    			</c:forEach>
  						</select>
  						
  						<select name="cardId" id="cardId" >
		    			<c:forEach items="${cards}" var="c">
		    				<option value="${c.id}" ${cardId==c.id ? 'selected="selected"':''}>${c.id}:${c.cardName}</option>
		    			</c:forEach>
  						</select>
  						<span class="input-group-addon">按时间 : </span> 
							  <input id="orderBeginTime" type="text" class="input-text size-S Wdate"  placeholder="开始时间"
									 name="orderPayTime" value="${orderPayTime }"
									 onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})">
							</div>
			    		</div>
			    	</div>
			    	<br/><br/>
			    	<div class="row">
			    		<div class="col-sm-12">
			    			<input type="submit" value="查询" class="btn btn-primary " style="float: right;"/>
 			    		</div>
			    	</div>
			    	<br/>
		    	</form>
		    </div>
		  </li>
		</ul>
    	</div>
    	<h3 style= "text-align: center;">分类销售量统计</h3>
			<div class="row cl" style="max-width:88%;margin-left:8%;">
			<div class="labelText"></div>
			<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    		<div id="main" style="width: 900px;height:600px;margin:0 auto"></div>
			</div>
    </body>
    
    <script>
    $(function(){
    	$.Huifold("#Huifold1 .item h4","#Huifold1 .item .info","fast",1,"click");
    	$('.orderByRadio').iCheck({
    		checkboxClass: 'icheckbox-blue',
    		radioClass: 'iradio-blue',
    		increaseArea: '20%'
    	});
    	$("#Huifold1 .item h4").click();
    	 
    });
    
    var limits = document.getElementById('buyType').value.trim();   
	 if(limits==1){
		 $("#courseId").show();
		 $("#chapterId").hide();
		 $("#cardId").hide();
		 
	 }else if(limits==2){
		 $("#courseId").hide();
		 $("#chapterId").show();
		 $("#cardId").hide();
		
	 }else if(limits==3){
		 $("#courseId").hide();
		 $("#chapterId").hide();
		 $("#cardId").show();
		 
	 }else{
		 $("#courseId").show();
		 $("#chapterId").hide();
		 $("#cardId").hide();
	 } ;
	 
	//选中下拉框选择的值
	 function choice(){
	 	var limits = document.getElementById('buyType').value.trim();   
 	 	if(limits==1){
    		 $("#courseId").show();
    		 $("#chapterId").hide();
    		 $("#cardId").hide();
    	 }else if(limits==2){
    		 $("#courseId").hide();
    		 $("#chapterId").show();
    		 $("#cardId").hide();
    	 }else if(limits==3){
    		 $("#courseId").hide();
    		 $("#chapterId").hide();
    		 $("#cardId").show();
    	 }else{
    		 $("#courseId").show();
    		 $("#chapterId").hide();
    		 $("#cardId").hide();
    	 } 
	 };
	 
	  $(function(){ 
		 var result ='${result}';
		var w = JSON.parse(result);  
		 
	     // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
		
		 option = {
		     color: ['#3398DB'],
		     tooltip : {
		         trigger: 'axis',
		         axisPointer : {            // 坐标轴指示器，坐标轴触发有效
		             type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
		         }
		     },
		     grid: {
		         left: '3%',
		         right: '4%',
		         bottom: '3%',
		         containLabel: true
		     },
		     xAxis : [
		         {
		             type : 'category',
		             data : w.timeString,
		             axisTick: {
		                 alignWithLabel: true
		             }
		         }
		     ],
		     yAxis : [
		         {
		             type : 'value',
		             minInterval : 1
		         }
		     ],
		     series : [
		         {
		             name:'销售量',
		             type:'bar',
		             barWidth: '60%',
		             data:w.resultString
		         }
		     ]
		 };
		 // 使用刚指定的配置项和数据显示图表。
	     myChart.setOption(option);
	 });
	
    </script>
</html>